<template>
    <div class="base" style="background-color: rgb(243, 248, 255);">
        <div class="top">
            <div class="top-icon">
            </div>

            <div class="top_detail">
                <span style="margin-left: 60px;">挂号详情</span>
            </div>
        </div>
        <!-- 患者信息 -->
        <div class="box">
            <div class="box_top">
                <span class="huanzhe">患者信息</span>
            </div>
            <div class="Information">
                <div style="width: 1060px; display: flex;">
                    <div>
                        <ul class="Information_box">
                            <li>
                                <div class="list1"><span style="color: #AAAAAA;">患者姓名</span><span
                                        style="margin-left: 70px;">赖尚荣</span><span
                                        style="color: #AAAAAA;margin-left: 200px;">就诊卡号</span><span
                                        style="margin-left: 70px;">5000909000</span></div>
                            </li>
                            <li>
                                <div class="list2"><span style="color: #AAAAAA;">证件类型</span><span
                                        style="margin-left: 70px;">身份证号</span><span
                                        style="color: #AAAAAA;margin-left: 185px;">证件号码</span><span
                                        style="margin-left: 70px;">371890199507070909</span></div>
                            </li>
                            <li>
                                <div class="list3"><span style="color: #AAAAAA;">微信名称</span><span
                                        style="margin-left: 70px;">七尾Sam</span><span
                                        style="color: #AAAAAA;margin-left: 185px;">手机号码</span><span
                                        style="margin-left: 70px;">1567890098</span></div>
                            </li>
                            <li>
                                <div class="list4"><span style="color: #AAAAAA;">就诊人地址</span><span
                                        style="margin-left: 55px;">北京市朝阳区**路**号**小区</span></div>
                            </li>
                        </ul>
                    </div>
                    <div class="demo-type">
                        <div>
                            <span style="margin-right: 50px;color: #AAAAAA;">患者头像</span>
                            <el-avatar :size="60" src="https://empty">
                                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
                            </el-avatar>
                        </div>
                        <div style="margin-top: 65px;">
                            <span style="color: #AAAAAA;">关系</span>
                            <span style="margin-left: 100px;">本人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 预约信息 -->
        <div class="box2">
            <div class="box_top">
                <span class="huanzhe">预约信息</span>
            </div>
            <div class="Information2">
                <div style="width: 100%;">
                    <div>
                        <ul class="Information_box">
                            <li>
                                <div class="connet1"><span style="color: #AAAAAA;">就诊医院</span><span
                                        style="margin-left: 70px;">北京市第一人民医院/东院</span><span
                                        style="color: #AAAAAA;margin-left: 70px;">医院地址</span><span
                                        style="margin-left: 70px;">北京市大兴区**路990号</span><span
                                        style="color: #AAAAAA;margin-left: 95px;">就诊科室</span><span
                                        style="margin-left: 60px;">消化内科-门诊3楼东区501</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet2"><span style="color: #AAAAAA;">就诊医生</span><span
                                        style="margin-left: 70px;">赵马</span><span
                                        style="color: #AAAAAA;margin-left: 219px;">医生职称</span><span
                                        style="margin-left: 70px;">主任医师</span><span
                                        style="color: #AAAAAA;margin-left: 197px;">挂号类型</span><span
                                        style="margin-left: 60px;">专家号</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet3"><span style="color: #AAAAAA;">门诊时间</span><span
                                        style="margin-left: 70px;">2020-12-30 周一 上午</span><span
                                        style="color: #AAAAAA;margin-left: 97px;">候诊时间</span><span
                                        style="margin-left: 70px;">9:30</span><span
                                        style="color: #AAAAAA;margin-left: 229px;">挂号费</span><span
                                        style="margin-left: 76px;">￥60.00</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet4"><span style="color: #AAAAAA;">预约时间</span><span
                                        style="margin-left: 70px;">2020-12-12 10:09:09</span><span
                                        style="margin-left: 104px; color: #AAAAAA;">就诊状态</span><span
                                        style="margin-left: 70px;">已取消</span>
                                    <span style="color: #AAAAAA;margin-left: 211px;">取消原因</span><span
                                        style="margin-left: 62px;">小程序操作取消</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet5"><span style="color: #AAAAAA;">取消时间</span><span
                                        style="margin-left: 71px;">2020-12-12 10:09:09</span></div>
                            </li>
                            <li>
                                <div class="connet6">
                                    <span style="color: #AAAAAA;">挂号备注</span>
                                    <el-input v-model="input" placeholder="请输入内容"
                                        style="width: 400px; margin-left: 70px;"></el-input>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div>
                    <el-button  type="primary" class="btn btn-primary" data-toggle="button" aria-pressed="false"
                        @click="Savebtn()">
                        保存
                    </el-button >
                    <el-button  type="primary" id="anniu" class="btn btn-primary" data-toggle="button" aria-pressed="false"
                        @click="Cancel()">取消</el-button >
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            input: ''
        }
    },
    methods: {
        Savebtn() {
            this.$message({
                message:'保存成功',
                type:'success'
            })
            this.$router.go(-1);
        },
        Cancel() {
            this.$router.go(-1);
        }
    }
}
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;

}

.base {
    height: 1075px;
}

.top {
    /* height: 100px; */
    display: flex;
    padding: 20px 0px;
    position: relative;
}



.top-icon {
    border-width: 0px;
    position: absolute;
    left: 20px;
    top: 33px;
    width: 24px;
    height: 8px;
    background: inherit;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #006EFF;
}

.top_detail {
    font-family: 'PingFangHK-Regular', 'PingFang HK', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    letter-spacing: 1px;
}

.box {
    width: 1280px;
    height: 365px;
    margin-left: 20px;

}

.box2 {
    width: 1280px;
    height: 500px;
    margin-left: 20px;
}

.box_top {
    width: 100%;
    height: 50px;
    background-color: rgb(242, 242, 242);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.Information {
    width: 100%;
    height: 300px;
    background-color: rgb(255, 255, 255);
}

.Information2 {
    width: 100%;
    height: 500px;
    background-color: rgb(255, 255, 255);
    border-radius: 0 0 10px 10px;
}

.huanzhe {
    font-family: 'PingFangHK-Medium', 'PingFang HK Medium', 'PingFang HK', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    color: #006EFF;
    text-align: left;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-left: 15px;
}

.list1,
.connet1 {
    padding: 40px 0 0 35px;
}

.list2,
.connet2 {
    padding: 40px 0 40px 35px;
}

.list3,
.connet3,
.connet4,
.connet5 {
    padding: 0 0 40px 35px;
}

.list4,
.connet6 {
    padding-left: 35px;
}

.Information_box {
    display: flex;
    flex-direction: column;
}

.demo-type {
    margin-left: 100px;
    padding-top: 40px;
}

.btn {
    width: 120px;
    height: 43px;
    background-color: rgb(0, 110, 255);
    margin: 35px 0 0 54px;
    border: none;
}

#anniu {
    width: 120px;
    height: 43px;
    background-color: rgb(230, 241, 255);
    color: rgb(0, 110, 255);
}

#anniu:hover {
    background-color: rgb(0, 110, 255);
    color: #fff;
}
</style>